<template>
<!-- 为你推荐 -->
  <div class="recommend">
    <div class="recommendone" v-for="item in recommended" :key="item.id">
      <div>
        <img :src="item.image" />
      </div>
      <div>
        <span>{{ item.store_name }}</span>
      </div>
      <div>
        <span>￥{{ item.price }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    props:["recommended"]
};
</script>

<style lang="less" scoped>
.recommend {
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .recommendone {
    margin-bottom: 15px;
    width: 167.5px;
    height: 215px;
    // display: flex;
    div {
      width: 167.5px;
      &:first-child {
        height: 167.5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      &:nth-child(2) {
        // margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        span {
          white-space: nowrap;
          font-size: 14px;
          color: #282828;
        }
      }
      &:nth-child(3) {
        span {
          color: #fc4141;
          font-size: 14px;
          font-weight: 500;
          // padding-left: 10px;
        }
      }
    }
  }
}
</style>